<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ListChange</title>
<link href="CSS/cssAll.css" rel="stylesheet" type="text/css" />
<link href="CSS/ListChange.css" rel="stylesheet" type="text/css" />
</head>

<body style="background:#000000;">
<div class="listChangeListBox"></div>
<div class=" floatL listChangeBtBox">
<form>
	<input type="button" value="全" class="goLeft" onclick="changeAll(-1)" onmousemove="onMove(3)" onmouseout="onMove(-3)" />
	<input type="button" value="" class="goLeft" onclick="changeOne(-1)" onmousemove="onMove(1)" onmouseout="onMove(-1)" />
	<input type="button" value="" class="goRight" onclick="changeOne(1)" onmousemove="onMove(2)" onmouseout="onMove(-2)" />
	<input type="button" value="全" class="goRight" onclick="changeAll(1)" onmousemove="onMove(4)" onmouseout="onMove(-4)" />
</form>
</div>
<div class="listChangeListBox"></div>
</div>
</body>
</html>
<script src="JS/showPrint.js"></script>
<script src="JS/func.js"></script>
<script>
<!--
var aLeft = new Array('left1','left2','left3','left4');
var aRight = new Array('right1','right2','right3');
var oBody = document.body;
var oArr = document.getElementsByTagName("li");
//var oLeft = getByClass(oBody,'listChangeListBox')[0];
//var oRight = getByClass(oBody,'listChangeListBox')[1];
var oLeft = getElementsByClassName('listChangeListBox',oBody)[0];
var oRight = getElementsByClassName('listChangeListBox',oBody)[1];
var oBtL = getElementsByClassName('goLeft',oBody)[1];
var oBtR = getElementsByClassName('goRight',oBody)[0];
var oBtLA = getElementsByClassName('goLeft',oBody)[0];
var oBtRA = getElementsByClassName('goRight',oBody)[1];
var oText,oLTemp,oRTemp;
var oCUl,oCLi; 
createUl(aLeft,oLeft);
createUl(aRight,oRight);

function createUl(aArr,oParent){
	var oUl = document.createElement('ul');
	oUl.className = 'listChangeList'; 
	for( n in aArr){
		var oLi = document.createElement('li');
		bindEvent(oLi,'click',function(){changeCol(this)});
		oText = document.createTextNode(aArr[n]);
		oLi.appendChild(oText);
		oUl.appendChild(oLi);
	}
	oParent.appendChild(oUl);
}

function changeAll(flag){
	if(flag==1){
		oLTemp=oLeft.childNodes[0].lastChild;
		while(oLTemp!=null){
			oCUl=oRight.childNodes[0];
			oCLi=oCUl.childNodes[0];
			changLR(oLTemp);
		}
	}
	else if(flag==-1){
		oRTemp=oRight.childNodes[0].lastChild;
		while(oRTemp!=null){
			oCUl=oLeft.childNodes[0];
			oCLi=oCUl.childNodes[0];
			changLR(oRTemp);
		}
	}
}

function changeOne(flag){
	if(flag==1){
		if(oLTemp!=null){
			oCUl=oRight.childNodes[0];
			oCLi=oCUl.childNodes[0];
			changLR(oLTemp);
//			if (oLTemp.previousSibling==oLTemp.nextSibling){
//				oCUl.insertBefore(oLTemp,oCLi);
//				changeCol(null);
//			}
//			else if(oLTemp.nextSibling!=null){
//				changeCol(oLTemp.nextSibling);
//				oCLi?oCUl.insertBefore(oLTemp.previousSibling,oCLi):oCUl.appendChild(oLTemp.previousSibling);
//				//oUl.insertBefore(oLTemp.previousSibling,oLi);
//			}
//			else{
//				changeCol(oLTemp.previousSibling);
//				oCLi?oCUl.insertBefore(oLTemp.nextSibling,oCLi):oCUl.appendChild(oLTemp.nextSibling);
//				//oUl.insertBefore(oLTemp.nextSibling,oLi);
//			}
		}
		else{
			alert('请在左边选择元素');
		}
	}
	else if( flag==-1){
		if(oRTemp!=null){
			oCUl=oLeft.childNodes[0];
			oCLi=oCUl.childNodes[0];
			changLR(oRTemp);
		}
		else{
			alert('请在右边选择元素');
		}
	}
}

function changLR(oCTemp){
	if (oCTemp.previousSibling==oCTemp.nextSibling){
		oCUl.insertBefore(oCTemp,oCLi);
		changeCol(null);
	}
	else if(oCTemp.nextSibling!=null){
		changeCol(oCTemp.nextSibling);
		oCLi?oCUl.insertBefore(oCTemp,oCLi):oCUl.appendChild(oCTemp);
		//oCLi?oCUl.insertBefore(oCTemp.previousSibling,oLi):oCUl.appendChild(oCTemp.previousSibling);
	}
	else{
		changeCol(oCTemp.previousSibling);
		oCLi?oCUl.insertBefore(oCTemp,oCLi):oCUl.appendChild(oCTemp);
		//oCLi?oCUl.insertBefore(oCTemp.nextSibling,oLi):oCUl.appendChild(oCTemp.next);
	}
}

function changeCol(oObj){
	//alert(oObj.nodeName);
	for(var i=0;i<oArr.length;i++){
		oArr[i].style.backgroundPosition='0px 0px';		
	}
	if(oObj!=null){
		
		oObj.style.backgroundPosition='0px -29px';		
	}
	temp(oObj);
}

function temp(oObj){
	if(oObj!=null){
		if(oObj.parentNode.parentNode == oLeft){
			oLTemp=oObj;
			oRTemp=null;	
		}else if(oObj.parentNode.parentNode == oRight){
			oRTemp=oObj;
			oLTemp=null;
		}
	}
	else{
		oLTemp=null;
		oRTemp=null;
	}
}

function onMove(flag){
	switch (flag){
		case 1:oBtL.style.backgroundPosition='0px 0px';break;
		case -1:oBtL.style.backgroundPosition='0px -34px';break;
		case 2:oBtR.style.backgroundPosition='-25px 0px';break;
		case -2:oBtR.style.backgroundPosition='-25px -34px';break;
		case 3:oBtLA.style.backgroundPosition='0px 0px';break;
		case -3:oBtLA.style.backgroundPosition='0px -34px';break;
		case 4:oBtRA.style.backgroundPosition='-25px 0px';break;
		case -4:oBtRA.style.backgroundPosition='-25px -34px';break;
	}	
}
-->
</script>
